.searchBox {
  @apply absolute right-0 rounded-lg bg-bg25 py-3;
  top: 3.75rem;
  width: 25rem;
  max-height: 21.625rem;

  .menu {
    @apply h-5 flex justify-between items-center text-sm px-5 text-c99;
    margin-bottom: 0.4375rem;

    & > span {
      @apply cursor-pointer;
    }

    .menuBtn {
      @apply cursor-pointer h-5 text-xs flex items-center;

      & > img {
        @apply w-5 h-5 ml-1;
      }
    }
  }

  .searchList {
    @apply flex flex-wrap w-full overflow-hidden mt-3 px-5;
    max-height: 4.125rem;
    margin-bottom: 0.375rem;

    .item {
      @apply cursor-pointer h-7 leading-7 px-4 text-white text-sm rounded;
      background-color: #3e3e3e;
      margin-right: 0.625rem;
      margin-bottom: 0.625rem;

      &:hover {
        @apply bg-bg66;
      }
    }
  }

  .hotSearch {
    @apply flex items-center px-5 w-full text-sm text-white;
    height: 1.875rem;

    &:hover {
      @apply cursor-pointer;
      background-color: #343434;
    }

    .hotIndex {
      @apply w-5 h-5 text-center leading-5 rounded;
      background-color: #757575;

      &.one {
        background-color: #f92828;
      }

      &.two {
        @apply bg-theme;
      }

      &.three {
        background-color: #ffb60c;
      }
    }

    .hotName {
      @apply flex-1;
      margin: 0 0.625rem;
    }

    .hotLabel {
      @apply text-xs h-5 text-center leading-5 text-theme rounded;
      padding: 0 0.625rem;
      background-color: rgba(255, 128, 50, 0.1);
    }

    .hotLabelLive {
      background-color: rgba(51, 156, 255, 0.1);
      color: rgb(51, 156, 255);
    }
  }
}
